<template>
    <div id="container2"></div>
</template>

<script>
import { PivotSheet } from '@antv/s2';
export default {
    name: 'TableDemo2',
    props: {
        msg: String
    },
    data() {
        return {
            s2DataConfig: {
                fields: {
                    rows: ['type', 'subType'],
                    columns: ['province', 'city'],
                    values: ['number'],
                },
                data: this.generateRawData(
                    { province: 10, city: 100 },
                    { type: 10, sub_type: 100 },
                ),
            },
            s2Options: {
                width: 1600,
                height: 880,
            },
        }

    },

    methods: {
        generateRawData(
            row,
            col
        ) {
            const res = [];
            const rowKeys = Object.keys(row);
            const colKeys = Object.keys(col);

            for (let i = 0; i < row[rowKeys[0]]; i++) {
                for (let j = 0; j < row[rowKeys[1]]; j++) {
                    for (let m = 0; m < col[colKeys[0]]; m++) {
                        for (let n = 0; n < col[colKeys[1]]; n++) {
                            res.push({
                                province: `p${i}`,
                                city: `c${j}`,
                                type: `type${m}`,
                                subType: `subType${n}`,
                                number: i * n,
                            });
                        }
                    }
                }
            }

            return res;
        },
        async bootstrap() {
            const container = document.getElementById('container2');

            const s2 = new PivotSheet(container, this.s2DataConfig, this.s2Options);

            await s2.render(); // 返回 Promise
        }

    },
    mounted() {
        this.bootstrap()
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped></style>